
import React, { useEffect, useRef, useState } from 'react';
import KLineChart from '../../components/KLineChart.jsx';
// const HotspotTheme = () => {
//   return (
//     <div>
//       <h1>热点题材分析</h1>
//       <p>这里是热点题材功能的内容。</p>
//     </div>
//   );
// };
// 示例数据生成器（用于演示）

interface KlineData {
  timestamp: number;
  open: number;
  high: number;
  low: number;
  close: number;
  volume: number;
}
const generateMockData = (count =150) => {
  const data: KlineData[]= [];
  let timestamp = new Date().getTime() - count * 24 * 60 * 60 * 1000; // 从100天前开始
  let lastClose = 5000; // 初始收盘价

  for (let i = 0; i < count; i++) {
    const open = lastClose + (Math.random() - 0.5) * 100;
    const high = open + Math.random() * 50;
    const low = open - Math.random() * 50;
    const close = low + Math.random() * (high - low);
    const volume = Math.floor(Math.random() * 10000000);

    data.push({
      timestamp: timestamp + i * 24 * 60 * 60 * 1000,
      open: Number(open.toFixed(2)),
      high: Number(high.toFixed(2)),
      low: Number(low.toFixed(2)),
      close: Number(close.toFixed(2)),
      volume: volume,
    });

    lastClose = close;
  }
  console.log('data:', data);
  return data;
}
const HotspotTheme: React.FC = () => {
// function () {
  const [klineData, setKlineData] = useState<KlineData[]>([]);

  // 在组件挂载时生成初始数据
  useEffect(() => {
    setKlineData(generateMockData(150));
  }, []);

  // 模拟实时数据更新（例如，每2秒更新最后一根K线）
  useEffect(() => {
    const interval = setInterval(() => {
      setKlineData(prevData => {
        if (prevData.length === 0) return prevData;
        
        const newData = [...prevData];
        const lastCandle = newData[newData.length - 1];
        const newClose = lastCandle.close + (Math.random() - 0.5) * 10;
        const newHigh = Math.max(lastCandle.high, newClose);
        const newLow = Math.min(lastCandle.low, newClose);
        const newVolume = lastCandle.volume + Math.floor(Math.random() * 100000);

        // 更新最后一根K线的数据
        newData[newData.length - 1] = {
          ...lastCandle,
          high: Number(newHigh.toFixed(2)),
          low: Number(newLow.toFixed(2)),
          close: Number(newClose.toFixed(2)),
          volume: newVolume,
        };

        return newData;
      });
    }, 2000);

    // 清理定时器
    return () => clearInterval(interval);
  }, []); // 空依赖数组，确保定时器只创建一次

  return (
    <div className="App">
      <header className="App-header">
        <h1>React KLineChart 示例</h1>
      </header>
      <main>
        <KLineChart
          data={klineData}
          symbol="某股票 (DEMO)"
          style={{ border: '1px solid #ccc' }}
        />
      </main>
    </div>
  );
}



export default HotspotTheme;